<%--
  Created by IntelliJ IDEA.
  User: WEI
  Date: 2020/2/10
  Time: 14:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Sign in</title>

  <!-- Bootstrap core CSS -->
  <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

  <!-- Favicons -->
  <link rel="icon" href="${pageContext.request.contextPath}/img/favicon-32x32.png" sizes="32x32"
        type="image/png">
  <link rel="icon" href="${pageContext.request.contextPath}/img/favicon-16x16.png" sizes="16x16"
        type="image/png">
  <link rel="icon" href="${pageContext.request.contextPath}/img/favicon.ico">
  <meta name="theme-color" content="#563d7c">

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>
  <!-- Custom styles for this template -->
  <link href="${pageContext.request.contextPath}/css/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" method="post" id="loginForm">
  <img class="mb-4" src="${pageContext.request.contextPath}/css/bootstrap-solid.svg" alt="" width="72px" height="72px">
  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
  <c:if test="${not empty param.error}">
    <span style="color: red;">
      用户名或密码错误
    </span>
  </c:if>
  <span style="color: red;" id="errorMsg"></span>
  <label for="username" class="sr-only">username</label>
  <input type="text" name="username" id="username" class="form-control"
         placeholder="username" required="" value="eric"/>
  <label for="password" class="sr-only">Password</label>
  <input type="password" name="password" id="password" class="form-control"
         placeholder="Password" required="" value="123456"/>
  <label for="imageCode" class="sr-only">ImageCode</label>
  <input type="text" name="imageCode" id="imageCode" class="form-control"
         placeholder="imageCode" required=""/>
  <img  src="${pageContext.request.contextPath}/imageCode" alt="验证码" id="image" width="240px" height="75px"/>
  <a href="javascript:reload();"><label>换一张</label></a><br/>
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" name="remember-me" value="true"/> Remember me
    </label>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="button" id="loginBtn">Sign in</button>
  <p class="mt-5 mb-3 text-muted">© wct 2017-2019</p>
</form>

<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>

<!-- 异步登录 -->
<script>
  var action = "${pageContext.request.contextPath}/login";
  $(function () {
    $("#loginBtn").click(function () {
      $("#errorMsg").text = "";
      $.post(action, $("#loginForm").serialize(), function (data) {
        window.console.log("data: " + data);
        if (data.success) {
          // 登录成功
          window.location.href = "${pageContext.request.contextPath}/product/index";
        } else {
          // 登录失败
          window.console.log("用户名或密码错误");
          // $("#errorMsg").text("用户名或密码错误");
          $("#errorMsg").text("登录失败, " + data.errorMsg);
          reload();
        }
      }, "json");
    });
  });

  function reload(){
    document.getElementById("image").src="${pageContext.request.contextPath}/imageCode?date="+new Date().getTime();
    $("#imageCode").val("");   // 将验证码清空
  }

</script>
</body>
</html>